<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import * as _ from "lodash-es";

defineOptions({
  name: "diyHeader",
});

const nameTxt = ref("建设银行");
const visible = ref(false);
const loading = ref(false);
const determine = () => {
  if (nameTxt.value.trim() == "") {
    return ElMessage.error("请输入模板名称");
  }
  ElMessage.success("修改成功");
  visible.value = false;
};

const returnTap = () => {
  ElMessageBox.confirm(
    "确定离开此页面？系统可能不会保存您所做的更改。",
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage.success("已返回");
    })
    .catch(() => {
      ElMessage.success("已取消");
    });
};
</script>

<template>
  <div class="flex items-center text-sm cursor-pointer" @click="returnTap">
    <div class="iconfont icon-left"></div>
    <div class="ml-1">返回</div>
  </div>
  <div class="h-4 mx-4 border-r border-white"></div>
  <div class="flex items-center">
    <span class="name mr5">当前页面：{{ nameTxt || "模板" }}</span>

    <el-popover :visible="visible" placement="bottom" :width="347">
      <template #reference>
        <span
          class="iconfont icon-edit ml-2 cursor-pointer"
          @click="visible = !visible"
        ></span>
      </template>
      <div class="flex">
        <el-input
          v-model="nameTxt"
          placeholder="必填不超过15个字"
          maxlength="15"
          style="width: 200px"
        ></el-input>
        <el-button type="default" @click="visible = !visible"> 取消 </el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </div>
    </el-popover>
  </div>
  <div class="ml-auto">
    <el-button type="primary" :loading="loading"> 预览 </el-button>
    <el-button type="primary" :loading="loading"> 保存 </el-button>
    <el-button type="default" :loading="loading"> 保存并关闭 </el-button>
  </div>
</template>

<style lang="scss" scoped></style>
